<template>
	<!-- 项目中心详情 -->
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<view v-for="(list,key) in modData" :class="list.mod_class" :key="key" :style="list.css">
			<moxi-index v-if="list.name=='plugin_info_project_con'" :list="list" >
		<view class="index" v-if="data.id">
			<view class="top">
				<view class="box-con" v-if="data.touzi" style="background-color: #f4f4f4;color: #9d9d9d;">
					项目投资方
				</view>
				<view class="box-con" v-if="data.touzi">
					{{data.touzi}}
				</view>
				<view class="box-list" style="">
					<view class="box-title">
						编号：
					</view>
					<view class="box-con">
						{{data.no}}
					</view>
				</view>
				<view class="box-list" v-if="data.city">
					<view class="box-title" >
						所在城市：
					</view>
					<view class="box-con">
						{{data.province}} - {{data.city}}
					</view>
				</view>
				
	<view class="box-list" style="">
		<view class="box-title">
			项目地址：
		</view>
		<view class="box-con">
			{{data.address}}
		</view>
	</view>
	<view class="box-list" style="">
		<view class="box-title">
			项目名称：
		</view>
		<view class="box-con">
			{{data.name}}
		</view>
	</view>
	<view class="box-list" style="">
		<view class="box-title">
			面积：
		</view>
		<view class="box-con">
			{{data.mianji}}/平方米
		</view>
	</view>
	<view class="box-list" style="">
		<view class="box-title">
			用途：
		</view>
		<view class="box-con">
			{{data.type}}
		</view>
	</view>
	<view class="box-list" style="">
		<view class="box-title">
			容积率：
		</view>
		<view class="box-con">
			{{data.rongji}}
		</view>
	</view>
	<view class="box-list" style="">
		<view class="box-title">
			投资总额：
		</view>
		<view class="box-con">
			{{data.money}}
		</view>
	</view>
	<view class="box-list" style="">
		<view class="box-title">
			联系人：
		</view>
		<view class="box-con">
			{{data.tel_name}}
		</view>
	</view>
	<view class="box-list" style="">
		<view class="box-title">
			联系电话：
		</view>
		<view class="box-con">
			{{data.tel}}
		</view>
	</view>
	<view class="box-list" style="">
		<view class="box-title">
			开工时间：
		</view>
		<view class="box-con">
			<text v-if="data.start_time>0">{{$u.timeFormat(data.start_time, 'yyyy年mm月dd日')}}</text>
			<text v-else>/</text>
		</view>
	</view>
	<view class="box-list" style="">
		<view class="box-title">
			竣工时间：
		</view>
		<view class="box-con">
			{{data.end_time}}
		</view>
	</view>
	<view class="box-list" style="">
		<view class="box-title">
			项目分类：
		</view>
		<view class="box-con">
			{{data.type_name}}
		</view>
	</view>
				<view style="margin: 10px 0;">
					<u-line dashed></u-line>	
				</view>
				<view style="display: flex;flex-direction: row;justify-content: space-between;">
					<view style="width: 48%;" @click="coll()">
						<u-button text="已收藏" icon="star-fill" :iconColor="app_color" v-if="data.collect&&data.collect==1"></u-button>
							<u-button text="添加收藏" icon="star"  v-else></u-button>
					</view>
					<view style="width: 48%;">
						<u-button @click="navto('plugin_info/project_collect')" text="我的收藏" icon="list-dot" :color="app_color" iconColor="#ffffff"></u-button>
					</view>
				</view>
			</view>


			<view class="bottom" v-if="data.content">
				<u-divider text="项目详情" textSize="14" ></u-divider>
				<u-parse :content="data.content"></u-parse>
			</view>
			<view class="middle" style="margin-bottom: 10px;" v-if="data.la>0">
				<!-- #ifdef MP-WEIXIN --> 
				<map v-if="data.la&&data.ln"  :style="appType!='baidu'?'width: 100%; height: 200rpx;':'width: 100%;'" 
				:latitude="data.la" :longitude="data.ln" :markers="covers"
					:enable-building="true" :enable-3D="true">
				</map>
				<!-- #endif --> 
				<view class="addressBox">
					<view style="display: flex;flex-direction: row;" @click="map(data.la,data.ln,data.address)">
					<view style="margin-right: 5px;"><u-icon name="map-fill"></u-icon></view>
					<text style="font-size: 14px;color: #666;">
						{{data.address}} 
					</text>
					</view>
					
				</view>
			</view>
		</view>
		</moxi-index>
		<moxi-index v-else :list="list" > </moxi-index>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					id: 1,
					// #ifdef H5
					iconPath: 'https://moxifile.oss-cn-beijing.aliyuncs.com/images/icon/address_1.png',
					// #endif
					latitude: 39.909,
					longitude: 116.39742,
					width: '18', // 标记点图标宽度
					height: '20' // 标记点图标高度
				}],
				content: `<p>项目介绍</p>`,
				data:{},
				ad:{}
			}
		},
		onLoad(param) {
			this.moxiPost("/plugin/info/index/project/get",{id:param.id},(data)=>{
				this.data = data.data;
				if(data.ad){
					this.ad = data.ad;
					this.$forceUpdate()
				}
			})
		},
		methods: {
			map(la,ln,address){
				uni.openLocation({
					latitude: Number(la),
					longitude: Number(ln),
					name:address,
					success: function () {
						
					}
				});
			},
			coll(){
				this.moxiPost("/plugin/info/user/project/collect",{pid:this.data.id},(data)=>{
					this.data.collect = data.data;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box-list{
		display: flex;flex-direction: row;border: 1px #fefefe solid;margin-top: -1px;
		font-size: 14px;
	}
	.box-title{
		width: 30%;flex-shrink: 0;background-color: #f4f4f4;padding: 10px;color: #ababab;
	}
	.box-con{
		display: flex;justify-content: center;align-items: center;
		padding: 10px;font-weight: 600;font-family:'黑体';color: #545454;
		background-color: #fafafa;flex: 1;
	}
	.bottom {
		width: 94%;
		margin: 10px auto;
		padding: 10px;
		border-radius: 6px;
		box-sizing: border-box;
		background-color: #fff;
	}

	.middle {
		width: 94%;
		margin: 0 auto;
		padding: 10px;
		border-radius: 6px;
		box-sizing: border-box;
		background-color: #fff;

		.addressBox {
			margin-top: 10px;

			.address {
				padding-top: 4px;
				font-size: 14px;
			}
		}
	}

	.top {
		width: 94%;
		margin: 10px auto;
		padding: 10px;
		border-radius: 6px;
		box-sizing: border-box;
		background-color: #fff;

		.title {
			font-size: 14px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.index {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		overflow: auto;
	}
</style>